import {Button, Form, Input, Modal} from 'antd';
import React from "react";

class DeviceForm extends React.Component {

  render() {
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const tailLayout = {
      wrapperCol: {
        offset: 8,
        span: 16,
      },
    };
    const onFinish = values => {
      this.props.add(values)
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };

    return (
      <Modal
        title="设备编辑"
        visible={this.props.deviceEditVisible}
        closable={true}
        onCancel={this.props.closeEdit}
        destroyOnClose={true}
        footer={null}
      >
        <Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="id"
            name="id"
            initialValue={this.props.deviceDetail.id}
            hidden={true}
          >
            <Input/>
          </Form.Item>
          <Form.Item
            label="名称"
            name="name"
            initialValue={this.props.deviceDetail.name}
            rules={[
              {
                required: true,
                message: '名称不能为空',
              },
            ]}
          >
            <Input/>
          </Form.Item>
          <Form.Item
            label="正常推码流"
            name="common_code"
            initialValue={this.props.deviceDetail.common_code}
            rules={[
              {
                required: true,
                message: '正常推码流不能为空',
              },
            ]}
          >
            <Input/>
          </Form.Item>
          <Form.Item
            label="红外推码流"
            name="infrared_code"
            initialValue={this.props.deviceDetail.infrared_code}
            rules={[
              {
                required: true,
                message: '红外推码流不能为空',
              },
            ]}
          >
            <Input/>
          </Form.Item>

          <Form.Item {...tailLayout} >
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  };

}

export default DeviceForm